import React, {useEffect, useState} from 'react';
import './index.less';
import EchartBase from '../echartBase';
import Fdls from '../../images/fdls.png'
import Zq from '../../images/zq.png'
import AmountChart from '@component/amountChart';
import echarts from "echarts/lib/echarts";
// fdls.png
// zq.png

const Amount = (props) => {
	const {amount = {}, ele = {}} = props;

	useEffect(() => {
		const myChart = echarts.init(document.getElementById('amount'));
		myChart.setOption(getOptions());
	}, [amount.fh]);

	const getOptions = () => {
		const dataArr = amount.fh;
		const colorSet = {
			color: '#468EFD'
		};
		const option = {
			grid: {
				top: 0,
				left: 0,
				bottom: 0,
				right: 0
			},
			series: [{
				type: "gauge",
				name: '内部刻度',
				radius: '50%',
				splitNumber: 1,
				axisLine: {
					lineStyle: {
						color: [
							[amount.fh / 100, colorSet.color],
							[1, "#111F42"]
						],
						width: 8
					}
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,

				},
				splitLine: {
					show: false,
				},
				itemStyle: {
					show: false,
				},
				detail: {
					show: false
				},
				title: { //标题
					show: true,
					offsetCenter: [0, 46], // x, y，单位px
					textStyle: {
						color: "#fff",
						fontSize: 14, //表盘上的标题文字大小
						fontWeight: 400,
						fontFamily: 'PingFangSC'
					}
				},
				data: [{
					name: `${(amount.fh / 10).toFixed(3)} MW`,
					value: amount.fh,
				}],
				pointer: {
					show: true,
					length: '75%',
					radius: '20%',
					width: 4, //指针粗细
				},
				animationDuration: 4000,
			},
				{
					name: '外部刻度',
					type: 'gauge',
					//  center: ['20%', '50%'],
					radius: '60%',
					min: 0, //最小刻度
					max: 10, //最大刻度
					splitNumber: 10, //刻度数量
					startAngle: 225,
					endAngle: -45,
					axisLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: [
								[1, 'rgba(0,0,0,0)']
							]
						}
					}, //仪表盘轴线
					axisLabel: {
						show: true,
						color: '#3E9CE2',
						distance: -12,
						formatter: function (v) {
							switch (v + '') {
								case '0':
									return '0';
								case '1':
									return '1';
								case '2':
									return '2';
								case '3':
									return '3';
								case '4':
									return '4';
								case '5':
									return '5';
								case '6':
									return '6';
								case '7':
									return '7';
								case '8':
									return '8';
								case '9':
									return '9';
								case '10':
									return '10';
							}
						}
					}, //刻度标签。
					axisTick: {
						show: true,
						splitNumber: 7,
						lineStyle: {
							color: colorSet.color, //用颜色渐变函数不起作用
							width: 1,
						},
						length: -7
					}, //刻度样式
					splitLine: {
						show: true,
						length: -14,
						lineStyle: {
							color: colorSet.color, //用颜色渐变函数不起作用
						}
					}, //分隔线样式
					detail: {
						show: false
					},
					pointer: {
						show: false
					}
				},
			]
		};

		return option;
	}

	return (<>{
							Object.keys(amount).length &&
							<div className="amount">
								<div className="amount-line">
									<EchartBase
										title={'实时负荷'}
										options={getOptions()}
										id="amount"
										style={{width: '200px', height: '200px'}}
									/>
									<div className="amount-diff">
										<div className="amount-year">
											<img src={Fdls} className={"amount-fdls"}/>
											<img src={Zq} className={"amount-fdls amount-turn"}/>
											<div className="amount-tips">
												<span>年发电量</span>
												<span className="scale">kWh</span>
											</div>
											<div className="progress">
												<div style={{
													width: `${amount.year / 1000 * 100}px`
												}}></div>
											</div>
											<div className="amount-tips amount-scale">
												<span>{amount.year}</span>
												<span className="scale">万</span>
											</div>
										</div>
										<div className="amount-year" style={{"marginTop": "10px"}}>
											<img src={Fdls} className={"amount-fdls"}/>
											<img src={Zq} className={"amount-fdls amount-turn"}/>
											<div className="amount-tips">
												<span>总发电量</span>
												<span className="scale">kWh</span>
											</div>
											<div className="progress">
												<div style={{
													width: `${amount.total / 1000 * 100}px`
												}}></div>
											</div>
											<div className="amount-tips amount-scale">
												<span>{amount.total}</span>
												<span className="scale">万</span>
											</div>
										</div>
									</div>
								</div>
								<AmountChart ele={ele}/>
							</div>
						}</>)
}

export default Amount